<template>
	<view class="main">
		<!--公共头部-->
		<my-header :background="background" title="选择申请审批人"></my-header>
		<view class="main-body-e">
			<view class="">
				<u-checkbox-group @change="checkboxGroupChange">
					<u-checkbox 
						@change="checkboxChange" 
						v-model="item.checked" 
						v-for="(item, index) in cheList" :key="index" 
						:name="item.name"
					>{{item.name}}</u-checkbox>
				</u-checkbox-group>
				<u-button @click="checkedAll">全选</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	export default {
		data() {
			return {
				cheList: [{
						name: '乐山市（2人）',
						checked: false,
						disabled: false
					},
					{
						name: '眉山市（1人）',
						checked: false,
						disabled: false
					},
					{
						name: '海口市（2人）',
						checked: false,
						disabled: false
					},
					{
						name: '小怪线充项目（0人）',
						checked: false,
						disabled: false
					},
					{
						name: '桩柜产销项目（1人）',
						checked: false,
						disabled: false
					},
					{
						name: '公司（2人）',
						checked: false,
						disabled: false
					}
				],
			}
		},
		components: {
			myHeader,
		},
		methods: {
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				console.log("小的"+e.name);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				console.log("大的"+e);
			},
			// 全选
			checkedAll() {
				this.list.map(val => {
					val.checked = true;
				})
			}
		}
	}
</script>

<style>
	.content {
		padding-bottom: 100rpx;
	}

	.title {
		font-size: 28rpx;
		line-height: 32rpx;
		padding: 45rpx 30rpx 18rpx;
		color: rgba(69, 90, 100, 0.6);
	}
</style>
